<nz-layout>
    <nz-header>
        <div class="header">
            <div class="header-logo">
                <a href="/"><img src="../../../assets/image/logo.png" alt="尝尽"></a>
            </div>

            <div class="header-menu">
                <ul nz-menu nzMode="horizontal">
                    <li nz-menu-item>
                        <a [routerLink]="[ '/discover' ]">发现</a>
                    </li>

                    <!-- <li nz-menu-item>
                        <a [routerLink]="[ '/security' ]">秘密</a>
                    </li> -->

                    <li nz-menu-item>
                        <a [routerLink]="[ '/editor' ]">写</a>
                    </li>
                </ul>
            </div>

            <div class="header-user" *ngIf="!user else logined">
                <a [routerLink]="[ '/login' ]">
                    <i nz-icon nzType="user" nzTheme="outline"></i>登录/注册</a>
            </div>

            <ng-template #logined>
                <div class="header-user">
                    <ul nz-menu nzMode="horizontal">
                        <li nz-submenu>
                            <div title>
                                <nz-avatar nzIcon="user" [nzSrc]="user.avatar"></nz-avatar>
                            </div>
                            <ul>
                                <li nz-menu-item [routerLink]="['/personal', user.account]">
                                    <i nz-icon nzType="user" nzTheme="outline"></i>我的主页
                                </li>
                                <li nz-menu-item (click)="logout()">
                                    <i nz-icon nzType="close-circle" nzTheme="outline"></i>退出
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </ng-template>

            <div class="header-searcher">
                <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
                    <input type="text" nz-input placeholder="输入查找的文章" />
                </nz-input-group>
                <ng-template #suffixButton>
                    <button nz-button nzType="primary" nzSize="large" nzSearch>查找</button>
                </ng-template>
            </div>
        </div>
    </nz-header>

    <nz-content>
        <router-outlet></router-outlet>
    </nz-content>

    <nz-footer>
        <div>
            京ICP备19051778号-1
        </div>
        <div>
            www.mrjoew.com
        </div>
    </nz-footer>
</nz-layout>

<app-modal-box>
    <app-modal-box-login name="login"></app-modal-box-login>
    <app-modal-box-default (changeModalBox)="changeModalBox($event)"></app-modal-box-default>
</app-modal-box>